

<template>
  <div class="allCanvas">
    <mu-appbar color="primary" class="lan-header right-all">
      <mu-button icon slot="left" @click="$emit('close')">
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>
      签名
      <mu-button icon slot="right" @click="clear">
        <span class="text">清除</span>
      </mu-button>
      <mu-button icon slot="right" @click="save">
        <span class="text">保存</span>
      </mu-button>
    </mu-appbar>
    <div class="canvasBody" id="canvasBody">
      <canvas id="canvassing" :width="width" :height="height" >Canvas画板</canvas>
      <!-- <img v-bind:src="url" alt /> -->
    </div>
    
  </div>
</template>
<script>
var draw;
var preHandler = function(e) {
  // e.preventDefault();
};
class Draw {
  constructor(el) {
    this.el = el;
    this.canvas = document.getElementById(this.el);
    this.cxt = this.canvas.getContext("2d");
    this.stage_info = this.canvas.getBoundingClientRect();
    this.path = {
      beginX: 0,
      beginY: 0,
      endX: 0,
      endY: 0
    };
  }
  init(btn,w,h) {
    var that = this;
    this.canvas.addEventListener("touchstart", function(event) {
      document.addEventListener("touchstart", preHandler, false);
      
      that.drawBegin(event);
    });
    this.canvas.addEventListener("touchend", function(event) {
      document.addEventListener("touchend", preHandler, false);
      
      that.drawEnd();
    });
    this.clear(btn,w,h);
  }
  drawBegin(e) {
    var that = this;
    window.getSelection()
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    this.cxt.strokeStyle = "#000";
    this.cxt.beginPath();
    this.cxt.moveTo(
      e.changedTouches[0].clientX,
      e.changedTouches[0].clientY - this.stage_info.top
    );
    this.path.beginX = e.changedTouches[0].clientX;
    this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;
    this.canvas.addEventListener("touchmove", function() {
      that.drawing(event);
    },false);
  }
  drawing(e) {
    this.cxt.lineTo(
      e.changedTouches[0].clientX,
      e.changedTouches[0].clientY - this.stage_info.top
    );
    this.path.endX = e.changedTouches[0].clientX;
    this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;
    this.cxt.stroke();
  }
  drawEnd() {
    document.removeEventListener("touchstart", preHandler, false);
    document.removeEventListener("touchend", preHandler, false);
    document.removeEventListener("touchmove", preHandler, false);
  }
  clear(btn,w,h) {
    this.cxt.clearRect(0, 0, w, h);
  }
  save() {
    // return canvas.toDataURL("image/png");
    return this.canvas.toDataURL();
  }
}
export default {
  data() {
    return {
      url: "",
      width:100,
      height:100,
    };
  },
  mounted() {
    this.$nextTick(o=>{
      let el = document.getElementById('canvasBody');
      this.width  = el.clientWidth
      this.height = el.clientHeight
      draw = new Draw("canvassing");
      draw.init('',this.width, this.height);
    })
  },
  methods: {
    clear: function() {
      draw.clear('',this.width, this.height);
    },
    save: function() {
      this.$openLoading();
      var data = draw.save();
      // this.url = data;
      // console.log(data);
      //图片上传
      var dataurl = data;
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      var file = new File([u8arr], new Date().getTime()+'.png', { type: mime });
      this.$A.FU(file, data => {
        // console.log(data)
        this.$closeLoading();
        this.$emit("success", data);
      })
    },
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
#canvas {
  background: #fff;
  touch-action: none;
  cursor: default;
}
.allCanvas{
  height:100%;
  width:100%;
  display: flex;
  flex-direction:column;
}
.canvasBody{
  height:calc(100% - 0.45rem);
  width:100%;
  box-sizing: border-box;
  border:0.1rem solid #eee;
}
</style>